<template>
	<view class="Share padding-lr" :style="{paddingTop:CustomBar+'px'}">
		<!-- 返回 -->
		<view :style="{height:(Custom.bottom - Custom.top)+'px',top:Custom.top+'px'}" class="Share-back">
			<text class="cuIcon-back text-white"></text>
		</view>
		<!-- 邀请好友 赢会员 -->
		<view class="Share-one"></view>
		<!-- 参考图 -->
		<view class="Share-two">
			<image mode="widthFix" src="@/static/vip/header.png"></image>
		</view>
		<!-- 立即邀请 -->
		<view class="Share-content">
			<view style="flex-direction: column;" class="flex align-center justify-between">
				<view class="text-center" style="width: 100%;">
					<view>已邀<text class="text-red">{{options.invitedCnt || 0}}人</text>可获得<text class="text-red">10天VIP</text></view>
					<view style="background-color: antiquewhite;" class="Share-price cu-progress margin-top round">
						<view :style="[{ width:options.progress+'%' || '0%' }]">
							<view></view>
						</view>
					</view>
					<view class="text-xs text-gray margin-top-sm">(分享小程序到微信群或好友，新用户点开小程序即为邀请成功，上不封顶)</view>
				</view>
				<view class="text-center" style="width: 100%;">
					<view>距离获得永久会员还差<text class="text-red">{{ (100 - options.permanentVipProgress*1)+'%'}}</text></view>
					<view style="background-color: antiquewhite;" class="Share-price cu-progress margin-top round">
						<view :style="[{ width:options.permanentVipProgress+'%' || '0%'}]">
							<view></view>
						</view>
					</view>
					<view class="text-xs text-gray margin-top-sm">(分享小程序到微信群或好友，新用户点开小程序即为邀请成功，上不封顶)</view>
				</view>
				<button @click="showModal=true" style="width: 50%;" class="cu-btn round Share-btn">保存分享</button>
			</view>
		</view>
		<!-- 立即分享 -->
		<view class="Share-footer flex ">
			<view>
				<image :src="imageValue" mode="aspectFill"></image>
			</view>
			<view class="flex justify-between">
				<view>分享到朋友圈、小红书或抖音可 以使用二维码分享</view>
				<button @click="showModal=true" style="margin-right: 20%;" class="round cu-btn Share-btn">保存分享</button>
			</view>
		</view>
		<!-- ios兼容 -->
		<view class="ios-safe"></view>
		<!-- 规则明细 -->
		<view @click="ruleShow=true" class="Share-rule">规则 | 明细</view>
		<!-- 规则 -->
		<view @click="ruleShow=false" class="cu-modal" :class="ruleShow ?'show':''">
			<view style="width: 560upx;background-color: #ff882a;" class="cu-dialog">
				<view style="position: relative;" class="cu-bar  justify-center ">
					<text class="text-bold text-white lg">规则明细</text>
					<view style="position: absolute;right: 30upx;top:30upx" @click.stop="ruleShow=false">
						<text class="cuIcon-close text-white"></text>
					</view>
				</view>
				<view class="margin-lr text-orange margin-bottom text-left padding"
					style="line-height: 50upx;border-radius: 10upx;background-color: antiquewhite;">
					<view>新用户登录享有五天免费会员！！</view>
					<view>每邀请一个新人登录：</view>
					<view>1. 增加两天会员时间。</view>
					<view>2. 触发永久会员进度条 (0% - 100% )，当进度条达到 100% 后变成永久会员。</view>
				</view>
			</view>
		</view>
		<!-- 二维码 -->
		<ImageModal :show="showModal" @cancel="showModal=false" :value="imageValue" />
		<view @click="show=false" class="cu-modal" :class="show ? 'show' : ''">
			<view class="Share-modal cu-dialog">
				<view style="flex-direction: column;" class="flex align-center justify-center text-sm text-white">
					<view style="line-height: 40upx;">恭喜您的好友给您带来好运增加<text
							class="text-xl text-yellow">{{options.add || 0}}%</text>进度</view>
					<view style="line-height: 40upx;">距离领取永久会员，仅差<text
							class="text-xl text-yellow">{{options.now || 100}}%</text></view>
					<button @click="showModal=true" class="radius  cu-btn Share-btn">保存分享</button>
					<image src="@/static/vip/modal.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from "@/api/Share/index.js";

	import ImageModal from '@/plugin/image_modal.vue';

	import Share from '@/utils/share.js';
	export default {
		mixins: [Share],
		components: {
			ImageModal
		},
		data() {
			return {
				imageValue: null,
				listValue: [],
				Custom: this.Custom,
				CustomBar: this.CustomBar,
				// 分享
				share: {
					title: '英文书架',
					path: '/personPage/Share/index', // 全局分享的路径
					imageUrl: '', // 全局分享的图片(可本地可网络)
				},
				ruleShow: false,
				showModal: false,
				show: false,
				options:{
					permanentVipProgress:100
				}
			}
		},
		onLoad() {
			 this.permanentVipProgressMessage();
			 this.myInviteProgress();
			this.getMyInviteMiniCode();
			// this.myInviteList();
		},
		methods: {
			// 邀请好友中奖信息
			async permanentVipProgressMessage(){
				let res=await api.permanentVipProgressMessage();
				if(res.code==0){
					this.options={...this.options,...res.data};
				}
			},
			// 邀请进度
			async myInviteProgress(){
				let res=await api.myInviteProgress();
				if(res.code==0){
					this.options={...this.options,...res.data};
				 this.show=true;
				}
			},
			// 获取我的邀请码
			async getMyInviteMiniCode() {
				let res = await api.getMyInviteMiniCode();
				if (res.code === 0) {
					this.imageValue = res.data;
				}
			},
			// 我的邀请列表
			async myInviteList() {
				let res = await api.myInviteList();
				if (res.code === 0) {
					this.listValue = res.data;
                    this.show=true;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Share {
		background-image: url("@/static/vip/bg.png");
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;

		.Share-modal {
			width: 100vw;
			background-color: transparent;
			overflow: visible;

			>view {
				width: 45vw;

				height: calc(45vw / 545 * 445);
				margin: auto;
				position: relative;
				overflow: visible;
                button{
					margin-top: 6%;
				}
				image {
					position: absolute;
					top: -26%;
					left: -11%;
					width: 100%;
					z-index: -1;
					transform: scale(3);
				}
			}
		}


		.Share-rule {
			position: absolute;
			top: 18vh;
			right: 0;
			padding: 10upx 20upx;
			border-radius: 50upx 0 0 50upx;
			color: #f1f1f1;
			background-color: rgba(0, 0, 0, 0.3);
		}

		.Share-price {
			position: relative;
			overflow: visible;

			>view {
				position: relative;
				border-radius: 5000rpx;
				background-color: #ff882a;

				>view {
					position: absolute;
					right: -30upx;
					top: -17upx;
					width: 60upx;
					height: 60upx;
					background-image: url("@/static/vip/price.png");
					background-repeat: no-repeat;
					background-size: 100%;
					background-position: center;
				}
			}
		}

		.Share-back {
			position: fixed;
			left: 20upx;
			display: flex;
			align-items: center;

			text {
				font-size: 32upx;
			}
		}

		.Share-one {
			position: absolute;
			z-index: 0;
			height: 6%;
			width: 100%;
			background-image: url("@/static/vip/one.png");
			background-repeat: no-repeat;
			background-position: center center;
			background-size: auto 100%;
		}

		.Share-two {
			// 354 271
			margin-top: 4%;
			width: 100%;
			z-index: 1;
			text-align: center;

			image {
				width: 100%;
			}
		}

		.Share-content {
			position: absolute;
			height: 40vh;
			bottom: 400upx;
			bottom: calc(400upx + constant(safe-area-inset-bottom));
			bottom: calc(400upx + env(safe-area-inset-bottom));
			width: calc(100% - 60upx);
			background-color: rgba(255, 255, 255, 0.3);
			border-radius: 16upx;
			padding: 30upx;
			box-sizing: border-box;

			>view {
				background-color: #f1f1f1;
				width: 100%;
				height: 100%;
				padding: 30upx;
			}
		}

		.Share-footer {
			position: absolute;
			bottom: 60upx;
			bottom: calc(60upx + constant(safe-area-inset-bottom));
			bottom: calc(60upx + env(safe-area-inset-bottom));
			left: 0upx;
			padding: 30upx;
			height: 300upx;

			>view:first-child {
				height: 300upx;
				width: 300upx;
				min-width: 300upx;
				padding: 20upx;
				box-sizing: border-box;
				background-color: antiquewhite;
				border-radius: 10upx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			>view:last-child {
				margin-left: 20upx;
				flex: auto;
				flex-direction: column;

				>view:first-child {
					color: #ffffff;
					flex: auto;
					display: flex;
					align-items: center;
				}

			}

		}

		.Share-btn {
			background-image: linear-gradient(to bottom, #ffff00, #ff9700);
			color: #ffffff;
		}
	}
</style>